<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>选择文档目录</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="steps-body-left">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              size="small"
              class="mb-20">
          </el-input>
          <!--          default-expand-all	是否默认展开所有节点-->
          <!--          props	配置选项，具体看下表-->
          <!--          label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—-->
          <!--          children	指定子树为节点对象的某个属性值	string	—	—-->
          <!--          disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	—	—-->
          <!--          isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效-->
          <el-tree
              class="filter-tree"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="custom-tree-list">
                    <i class="iconfont iconwenjianjia"></i>
                  <span class="tree-number"><el-radio v-model="fileId" :label="node.id" @change="getRadioFn(data)">{{node.label}}</el-radio></span>
                </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button size="small" type="primary" @click="checkSaveFn">确定保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['visible', 'fileOption','fileType'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      fileId: '',
      filterText: '',
      checkFileOption:{}
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      console.log('this.visible:',this.visible)
      if(this.visible){
        this.initFn()
      }else{
        this.checkFileOption = ''
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {

  },
  methods: {
    async initFn() {
      let data = await this.$fetch(this.api.task.file.index, {p: 0});
      if (!data.code) {
        // ===========star
        this.treeList = this.translateDataToTree(data.list)
        // =============end
      }
      console.log(data)
    },
    translateDataToTree(data) {
      let parents = data.filter(value => !value.parent_id)
      let children = data.filter(value => value.parent_id)
      console.log('循环的内容：', parents, children)
      let translator = (parents, children) => {
        parents.forEach((parent) => {
              children.forEach((current, index) => {
                    if (current.parent_id === parent.id) {
                      let temp = JSON.parse(JSON.stringify(children))
                      temp.splice(index, 1)
                      translator([current], temp)
                      typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                    }
                  }
              )
            }
        )
      }
      translator(parents, children)
      console.log('整合的数据内容：', parents, children)
      return parents
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getRadioFn(option){
      console.log('option:', option)
      this.checkFileOption = {
        name: option.name,
        id: option.id
      }
    },
    checkSaveFn(){
      this.$emit('getFileTree', this.checkFileOption)
      this.closePOpup()
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 500px;
  height: 600px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding:20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.jobTime span {
  padding: 0 10px;
}
.iconwenjianjia {
  color: #ff9d00;
}
</style>


